<template>
  <view class="item-page-container">
    <!-- 顶部区域 -->
    <view class="header">
      <view class="back-button" @tap="goBack">
        <text class="back-icon">←</text>
      </view>
      <view class="title">{{ pageTitle }}</view>
    </view>
    
    <!-- 内容区域 -->
    <scroll-view scroll-y="true" class="content-area">
      <!-- 错误显示 -->
      <error-display 
        :show="showError" 
        :title="errorTitle" 
        :message="errorMessage" 
        @retry="loadPageData"
      />
      
      <!-- 加载中 -->
      <view v-if="loading" class="loading-container">
        <view class="loading-spinner"></view>
        <text class="loading-text">加载中...</text>
      </view>
      
      <!-- 项目列表 -->
      <view v-else-if="!showError" class="items-container">
        <view v-if="items.length === 0" class="empty-container">
          <text class="empty-text">暂无相关内容</text>
        </view>
        
        <view v-else class="items-grid">
          <view 
            v-for="item in items" 
            :key="item.id"
            class="item-card"
            @tap="handleItemClick(item)"
          >
            <view class="item-icon">
              <image 
                  class="icon-image" 
                  :src="item.icon" 
                  mode="aspectFit"
                  @error="onImageError"
                ></image>
            </view>
            <view class="item-info">
              <text class="item-name">{{ item.name }}</text>
              <text class="item-description">{{ item.description }}</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import ErrorDisplay from '@/components/ErrorDisplay.vue';
import content from '@/common/api/content.js';
const itemAPI = content.item;
import { NavigationHelper } from '@/common/utils/navigation.js';
import { ErrorHandler } from '@/common/utils/errorHandler.js';

export default {
  components: {
    ErrorDisplay
  },
  data() {
    return {
      pageTitle: '',
      parentItemId: null,
      items: [],
      loading: false,
      showError: false,
      errorTitle: '',
      errorMessage: ''
    }
  },
  onLoad(options) {
    // console.log('item-page onLoad:', options);
    
    if (options.parent_id) {
      this.parentItemId = parseInt(options.parent_id);
    } else if (options.id) {
      // 处理从 home.vue 传递过来的 id 参数
      this.parentItemId = parseInt(options.id);
    }
    
    if (options.title) {
      try {
        this.pageTitle = decodeURIComponent(options.title);
      } catch (error) {
        console.error('标题解码失败:', error);
        this.pageTitle = options.title; // 使用原始标题作为备选
      }
    }
    
    this.loadPageData();
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    // 加载页面数据
    async loadPageData() {
      if (!this.parentItemId) {
        this.showError = true;
        this.errorTitle = '参数错误';
        this.errorMessage = '缺少必要的参数';
        return;
      }
      
      try {
        this.loading = true;
        this.showError = false;
        
        // 获取页面项目关联关系
        const response = await itemAPI.getPageItemRelations(this.parentItemId);
        
        if (response && response.data) {
          this.items = response.data;
        } else {
          this.items = [];
        }
        
      } catch (error) {
        console.error('加载页面数据失败:', error);
        this.showError = true;
        
        const errorInfo = ErrorHandler.handleApiError(error);
        this.errorTitle = errorInfo.errorTitle;
        this.errorMessage = errorInfo.errorMessage;
      } finally {
        this.loading = false;
      }
    },
    
    // 处理项目点击 - 使用公共工具类
    async handleItemClick(item) {
      await NavigationHelper.navigateToItem(item);
    },
    
    // 图片加载错误处理
    onImageError(e) {
      console.error('图片加载失败:', e);
      // 设置默认图片
      e.target.src = '/static/icons/helper.png';
    }
  }
}
</script>

<style>
.item-page-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}

/* 顶部区域样式 */
.header {
  display: flex;
  align-items: center;
  background-color: #1e3c72;
  color: #fff;
  padding: calc(20rpx + 44px) 20rpx 20rpx 20rpx;
  position: relative;
}

.back-button {
  position: absolute;
  left: 20rpx;
  top: calc(20rpx + 44px + 10rpx);
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.back-icon {
  font-size: 40rpx;
  color: #fff;
  font-weight: bold;
}

.title {
  flex: 1;
  text-align: center;
  font-size: 36rpx;
  font-weight: 600;
  padding: 0 80rpx;
}

/* 内容区域样式 */
.content-area {
  flex: 1;
  padding: 20rpx;
}

/* 加载中样式 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.loading-spinner {
  width: 60rpx;
  height: 60rpx;
  border: 4rpx solid #e0e0e0;
  border-top: 4rpx solid #1e3c72;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  margin-top: 20rpx;
  color: #666;
  font-size: 28rpx;
}

/* 空状态样式 */
.empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100rpx 0;
}

.empty-text {
  color: #999;
  font-size: 28rpx;
}

/* 项目网格样式 */
.items-grid {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.item-card {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.item-card:active {
  transform: scale(0.98);
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
}

.item-icon {
  width: 80rpx;
  height: 80rpx;
  margin-right: 24rpx;
  flex-shrink: 0;
}

.icon-image {
  width: 100%;
  height: 100%;
  border-radius: 12rpx;
}

.item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.item-name {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
}

.item-description {
  font-size: 26rpx;
  color: #666;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>